<template>
  <div class="page-Body">
    <h2 class="page-title">活动数据</h2>
    <div class="page-content">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        fit
        empty-text="暂无数据"
        show-header
        v-loading="loading"
        size="default"
        element-loading-text="Loading..."
        :header-cell-style="{ background: '#e7e1fb' }"
        style="width: 60%"
        max-height="650px"
      >
        <el-table-column prop="ticketName" label="票种名称" />
        <el-table-column prop="price" label="金额" v-slot="scope">
          {{ '￥' + scope.row.price }}
        </el-table-column>
        <el-table-column prop="ticketQuantity" label="名额" />
        <el-table-column prop="participantNumber" label="已报名" />
        <el-table-column prop="pendingReviewNumber" label="待审核" />
        <el-table-column prop="redeemedNumber" label="已签到" />
      </el-table>
      <!-- 表格 -->
      <el-table
        :data="priceDay"
        border
        stripe
        fit
        empty-text="暂无数据"
        show-header
        v-loading="loading"
        size="default"
        element-loading-text="Loading..."
        :header-cell-style="{ background: '#e7e1fb' }"
        style="width: 35%"
        max-height="650px"
      >
        <!-- 时间 -->
        <el-table-column prop="orderNum" label="订单ID" />
        <el-table-column prop="joinTime" label="报名时间" />
        <el-table-column prop="price" label="金额" v-slot="scope">
          {{ '￥' + scope.row.price }}
        </el-table-column>
        <el-table-column prop="roleStr" label="详情">
          <template v-slot="scope">
            <el-button
              link
              type="primary"
              @click="handleDetails(scope.row.orderNum)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 成员详情对话框 -->
    <DataDetails_Dialog
      :dialogDetails="dialogDetails"
      :orderNum="orderNum"
      @cancel="handleClose"
    />
  </div>
</template>

<script setup name="activityData">
import {
  getActivityData,
  getActivityDataDay,
} from '@/api/Activity/ActivityMent.js';
import DataDetails_Dialog from '@/components/Activity/ActivityMent/DataDetails_Dialog.vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// 对话框
const dialogDetails = ref(false);
const orderNum = ref('');
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
const priceDay = ref([]);
// 获取列表
const ActivityData = async () => {
  loading.value = true;
  // const a = '1871100510846685185';
  const res = await getActivityData(route.params.id);
  console.log(res);

  if (res.data.code === 200) {
    tableData.value = res.data.data.participant;
    loading.value = false;
  }
};

// 获取活动收入列表
const ActivityDataDay = async () => {
  loading.value = true;
  // const a = '1871100510846685185';
  const res = await getActivityDataDay(route.params.id);
  console.log(res);

  if (res.data.code === 200) {
    priceDay.value = res.data.data;
    loading.value = false;
  }
};
// 成员详情对话框
const handleDetails = (id) => {
  dialogDetails.value = true;
  orderNum.value = id;
};
const handleClose = () => {
  dialogDetails.value = false;
};
onMounted(() => {
  ActivityData();
  ActivityDataDay();
});
</script>

<style lang="scss" scoped>
.page-content {
  display: flex;
  justify-content: space-between;
}
</style>
